/**
 * Created by yujianfu on 2016/11/17.
 */
import React, {Component, PropTypes} from 'react'
import {Form, message, Input, Button, Icon, Select} from 'antd'
import {fetchPost} from './../../../utils/request'
import Style from './Index.less'

const FormItem = Form.Item

class Edit extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeItem: {
        id: 0,
        name: '',
        url: '',
        menuType: '0',
      },
      params: {
        name: null,
        url: null
      }
    }
  }

  componentWillReceiveProps(props) {
    let activeItem = props.activeItem
    if (this.state.activeItem.id != activeItem.id) {
      this.setState({
        activeItem,
      })
    }
  }

  handleUpdate(e) {
    e.preventDefault()
    const {name, url, menuType} = this.props.form.getFieldsValue()
    if (typeof (name) === 'undefined') {
      message.error('Required items can not be empty')
    } else {
      this.setState({
        activeItem: {
          ...this.state.activeItem,
          name,
          url,
          menuType,
        },
        params: {
          name,
          url,
          menuType,
        }
      }, () => {
        this.updateMenu()
      })
    }
  }

  updateMenu() {
    fetchPost(`/menu/${this.state.activeItem.id}/update`, this.state.params).then(json => {
      if (json.code === 0) {
        message.info('Add Success')
        this.props.form.resetFields()
      } else {
        message.error(json.msg)
      }
    })
  }

  handleDelete(e) {
    e.preventDefault()
    const {id} = this.props.form.getFieldsValue()
    this.deleteMenu(id)
  }

  deleteMenu(id) {
    fetchPost(`/menu/${this.state.activeItem.id}/delete`, id).then(json => {
      if (json.code === 0) {
        message.info('Delete Success')
        this.props.form.resetFields()
      } else {
        message.error(json.msg)
      }
    })
  }

  handleReset(e) {
    e.preventDefault()
    this.props.form.resetFields()
  }

  render() {
    const {getFieldDecorator} = this.props.form

    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 14}
    }

    return (
      <div className={Style.menuWrapper}>
        <Form horizontal onSubmit={this.handleUpdate}>

          <Input type='hidden' value={this.state.activeItem.id}/>

          <FormItem
            {...formItemLayout}
            label='Name'
            hasFeedback
          >
            {getFieldDecorator('name', {
              rules: [
                {required: true, message: 'Name can not be empty'}
              ],
              initialValue: this.state.activeItem.name
            })(
              <Input/>
            )}
          </FormItem>

          <FormItem
            {...formItemLayout}
            label='Menu Type'
            hasFeedback
          >
            {getFieldDecorator('menuType', {
              initialValue: this.state.activeItem.menuType == null ? '' : this.state.activeItem.menuType + '',
              rules: [{
                required: true, message: '请输入额度'
              }]
            })(
              <Select placeholder='Choose Menu Type'>
                <Option key='0'>内部使用</Option>
                <Option key='1'>商户通用</Option>
                <Option key='2'>自定义(不同步)</Option>
              </Select>
            )}
          </FormItem>

          <FormItem
            {...formItemLayout}
            label='url'
            hasFeedback
          >
            {getFieldDecorator('url', {
              initialValue: this.state.activeItem.url
            })(
              <Input/>
            )}
          </FormItem>

          <FormItem wrapperCol={{span: 14, offset: 6}}>
            <Button type='primary' onClick={(e) => this.handleUpdate(e)}>Update</Button>
            &nbsp;
            <Button type='primary' onClick={(e) => this.handleDelete(e)}>Delete</Button>
            &nbsp;
            <Button type='ghost' onClick={(e) => this.handleReset(e)}><Icon type='reload'/></Button>
          </FormItem>
        </Form>
      </div>
    )
  }
}

Edit = Form.create()(Edit)
export default Edit
